<template>
	<view v-if="type" class="data-prompt-status" :class="{ position: fixed }">
		<view :style="{ marginTop: filterTop }" class="data-prompt-status-main">
			<view
				:class="{
					nodata: type === 'nodata',
					loading: type === 'loading'
				}"
				v-if="showImageUrl"
				class="data-prompt-status-main-image"
			>
				<image :src="showImageUrl" />
			</view>

			<view class="data-prompt-status-main-hint">
				{{ showLabel }}
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

const defaultPrefix = `${defaultImageUrl}image/`;

const typeObject = {
	/**
	 * 没有数据时展示 图片
	 */
	nodata: {
		label: '还没有数据哦',
		imagrUrl: `${defaultPrefix}img_nocontent.png`
	},
	/**
	 * 无网络
	 */
	nonetwork: {
		label: '老板，您网络好像出问题了',
		imagrUrl: `${defaultPrefix}img_nowifi.png`
	},
	/**
	 * 数据加载
	 */
	loading: {
		label: '数据加载中，请稍等...'
	},

	/**
	 * 暂无更多数据
	 */
	nomore: {
		label: '已经到底啦~'
	}
};

export default {
	name: 'dataPromptStatus',

	props: {
		/**
		 * 展示类型
		 */
		type: {
			type: String || null,
			default: 'loading'
		},

		/**
		 * 自定义提示文字
		 */
		hintLabel: {
			type: String
		},

		/**
		 * 自定义图片
		 */
		hintImage: {
			type: String
		},

		/**
		 * 元素距离
		 */
		top: {
			type: String,
			default: '0rpx'
		},

		fixed: {
			type: Boolean,
			default: false
		},

		customize: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},

	computed: {
		showLabel: function () {
			const { type, hintLabel, typeObject, customize } = this;

			if (!type) {
				return '';
			}

			const formatTypeObject = {
				...typeObject,
				...customize
			};

			return hintLabel || formatTypeObject[type].label;
		},

		showImageUrl: function () {
			const { type, hintImage, typeObject, customize } = this;

			if (!type) {
				return '';
			}

			const formatTypeObject = {
				...typeObject,
				...customize
			};

			return hintImage || formatTypeObject[type].imagrUrl || '';
		},

		filterTop: function () {
			const { top } = this;
			// const { top, type } = this;
			// const filterArray = ['loading', 'nodata'];

			// return filterArray.includes(type) ? '40rpx' : top;
			return top;
		}
	},

	data() {
		return {
			typeObject
		};
	}
};
</script>

<style lang="scss" scoped>
.data-prompt-status {
	&-main {
		overflow: hidden;

		&-image {
			height: 240rpx;
			position: relative;

			image {
				position: absolute;
				top: 0;
				left: 50%;
				width: 240rpx;
				height: 100%;
				transform: translateX(-50%);
			}

			// &.loading {
			// 	height: 100rpx;

			// 	image {
			// 		width: 100rpx;
			// 		height: 100rpx;
			// 	}
			// }

			&.nodata {
				height: 320rpx;
				margin-bottom: 20rpx;

				image {
					width: 480rpx;
					height: 320rpx;
				}
			}
		}

		&-hint {
			color: #999;
			height: 76rpx;
			font-size: 26rpx;
			line-height: 76rpx;
			text-align: center;
		}
	}

	&.position {
		position: absolute;
		width: 100vw;
		top: 50%;
		transform: translate(0, -50%);
	}
}
</style>
